import React, {useEffect, useState} from "react";
import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar, Image, TouchableWithoutFeedback, TouchableOpacity, ScrollView } from "react-native";
import { Header, InputBar } from "../../components";
import { GET, pxToPt } from "../../utils";
import {useNavigation} from '@react-navigation/native'
import { GETCONTACTS } from "../../service";
import {useDispatch, useSelector} from 'react-redux'



const Index = () => {
  const navigation = useNavigation()
  const user = useSelector(state=>state.user)
  const friendMap = useSelector(state=>state.user.friendMap)
  const friendList = useSelector(state=>state.user.friendList)
 

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.wrapper}>
        <Header 
          title="联系人" 
          right={<Text onPress={navigation.navigate.bind(this, 'SearchFriend')}>add</Text>} 
        />
        <ScrollView style={styles.main}>
          <Text onPress={()=>navigation.navigate('NewFriend')}>新的朋友</Text>
          <View>
            {friendList.map(item=> {
              return (
                <TouchableOpacity onPress={()=> navigation.navigate('PersonalHomePage', {fid: friendMap[item].fid})}>
                  <View style={styles.item}>
                    <Image style={styles.avatar} source={require('../../../assets/bg/woman.jpeg')} />
                    <Text style={styles.title}>{friendMap[item].fname}</Text>
                  </View>
                </TouchableOpacity>
              )
            })}
          </View> 
        </ScrollView>

      </View>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
    // backgroundColor: '#000',

  },
  wrapper: {
    flex: 1,
    marginHorizontal: 16,
    // backgroundColor: '#000',

  },
  main: { flex: 1},
  item: {
    backgroundColor: "#1C1C1E",
    height: pxToPt(55),
    marginVertical: 1,
    borderRadius: pxToPt(5),
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: pxToPt(25),
    height: pxToPt(25),
    marginLeft: pxToPt(10),
    marginRight: pxToPt(10)
  },
  header: {
    borderRadius: pxToPt(10),
    height: pxToPt(25),
    backgroundColor: "#1C1C1E",
    marginTop: pxToPt(10),
    marginBottom: pxToPt(10)
  },
  headerText: {
    fontSize: pxToPt(16),
    paddingLeft: pxToPt(10),
    color: '#878B95',
   
  },
  title: {
    fontSize: 24,
    lineHeight: pxToPt(55),
    color: 'white',
    fontSize: pxToPt(18)
  }
});

export default Index;